<template>
  <div class="edit_container tinymceClass">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {
        placeholder: "请在这里输入内容",
        modules:{
          toolbar:[
            ['image'],
          ]
        }
      },
      content:'',
    }
  },
  methods: {
    onEditorReady(editor) { // 准备编辑器

    },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(){}, // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  }
}
</script>
<style lang="scss">
.tinymceClass {
  .quill-editor {
    .ql-toolbar{
      height: 40px !important;
    }
  }
}

</style>
